<template>
	<view class="content">
		<view class="preview" id="video-container"></view>
		<view class="btnList">
			<view class="btnList-list">
				<view class="btnList-list-btn" @click="ezuikit.stop">
					暂停
				</view>
				<view class="btnList-list-btn" @click="ezuikit.play">
					播放
				</view>
				<view class="btnList-list-btn" @click="ezuikit.openSound">
					打开声音
				</view>
			</view>
			<view class="btnList-list">
				<view class="btnList-list-btn" @click="ezuikit.closeSound">
					关闭声音
				</view>
				<view class="btnList-list-btn" @click="ezuikit.startSave">
					开始保存
				</view>
				<view class="btnList-list-btn" @click="ezuikit.stopSave">
					停止保存
				</view>
			</view>
			<view class="btnList-list">
				<view class="btnList-list-btn" @click="ezuikit.capturePicture">
					截屏
				</view>
				<view class="btnList-list-btn" @click="ezuikit.fullScreen">
					全屏
				</view>
				<view class="btnList-list-btn" @click="ezuikit.getOSDTime">
					系统时间
				</view>
			</view>
			<view class="btnList-list">
				<view class="btnList-list-btn" @click="ezuikit.ezopenStartTalk">
					开始对讲
				</view>
				<view class="btnList-list-btn" @click="ezuikit.ezopenStopTalk">
					结束对讲
				</view>
				<view class="btnList-list-btn" @click="ezuikit.destroy">
					销毁
				</view>
			</view>
			
		<!-- 	<button @click="ezuikit.stop">stop</button>
			<button @click="ezuikit.play">play</button>
			<button @click="ezuikit.openSound">openSound</button>
			<button @click="ezuikit.closeSound">closeSound</button>
			<button @click="ezuikit.startSave">startSave</button>
			<button @click="ezuikit.stopSave">stopSave</button> -->
		<!-- 	<button @click="ezuikit.capturePicture">capturePicture</button>
			<button @click="ezuikit.fullScreen">fullScreen</button>
			<button @click="ezuikit.getOSDTime">getOSDTime</button> -->
	<!-- 		<button @click="ezuikit.ezopenStartTalk">开始对讲</button>
			<button @click="ezuikit.ezopenStopTalk">结束对讲</button>
			<button @click="ezuikit.destroy">销毁</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strings: ' '
			}
		},
		methods: {
			
		}
	}
</script>

<script module="ezuikit" lang="renderjs">
	import { getVideoUrl } from '@/api/device.js'
	import config from '@/config'
	var player = null;
	const baseUrl = config.baseUrl
	const deviceId = ''
	const urlData = ''
	export default {
		onLoad(e) {
			if(e.id) {
				this.deviceId = e.id
			}
		},
		mounted() {
			console.log('mounted...');

			if (typeof window.EZUIKit !== 'undefined') {
				
				console.log('defined EZUIKit...');
				this.initPlayer();
			} else {
				console.log('undefined EZUIKit...');				
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/ezuikit.js'
				// script.src = 'http://localhost:8080/static/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},

		methods: {
			async getVideo() {
				return await getVideoUrl(this.deviceId).then(res => {
					this.urlData = res.data
				})
			},
			initPlayer() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				this.getVideo().then(res => {
					fetch('https://open.ys7.com/api/lapp/token/get',
							{	method:'post',
								headers:{'Content-Type':'application/x-www-form-urlencoded'},
								body:'appKey=1f1d31c45b9e4282ac2e54264811330c&appSecret=d0c204b18af15a0f094f0ada419c44a2',
							},
						).then(response => response.json())
					      .then(res => {
					        var accessToken = res.data.accessToken;
					        player = new EZUIKit.EZUIKitPlayer({
					          id: 'video-container', // 视频容器ID
					          accessToken: accessToken,
							  // url: 'ezopen://open.ys7.com/FC7575801/1.live?',
					          url: 'ezopen://open.ys7.com/'+ this.urlData.deviceSerial+ '/'+ this.urlData.channelNo + '.live',
					          // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					          //template: 'simple',
					          plugin: ['talk'], // 加载插件，talk-对讲
					          width: windowWidth,
					          height: windowWidth * 2 / 3,
					        });
					        window.player = player;
					      });
				})
			},
			play() {
				var playPromise = player.play();
				playPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			stop() {
				var stopPromise = player.stop();
				stopPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			getOSDTime() {
				var getOSDTimePromise = player.getOSDTime();
				getOSDTimePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			capturePicture() {
				var capturePicturePromise = player.capturePicture(`${new Date().getTime()}`);
				capturePicturePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			openSound() {
				var openSoundPromise = player.openSound();
				openSoundPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			closeSound() {
				var openSoundPromise = player.closeSound();
				openSoundPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			startSave() {
				var startSavePromise = player.startSave(`${new Date().getTime()}`);
				startSavePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			stopSave() {
				var stopSavePromise = player.stopSave();
				stopSavePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			ezopenStartTalk() {
				player.startTalk();
			},
			ezopenStopTalk() {
				player.stopTalk();
			},
			fullScreen() {
				player.fullScreen();
			},
			destroy() {
				var destroyPromise = player.destroy();
				destroyPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.preview {
		background-color: black;
	}
	.btnList{
		width: 100vw;
		padding: 20rpx;
	}
	.btnList-list{
		display: flex;
		gap: 10rpx;
		margin-bottom: 10rpx;
	}
	.btnList-list-btn{
		flex: 1;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 8rpx;
		box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
	}
</style>
